<template>
	<view>
		<view style="height: 200rpx;width: 750rpx;" @click="jumpPage">
			<image style="width: 100%;height: 100%;" src="https://yunxingzhanfile.oss-cn-qingdao.aliyuncs.com/10001/20210805/47977453df361b2d456ed88bcdc3a613.jpeg"></image>
		</view>
		<!-- <swiper class="coupon" circular :autoplay="true" :interval="10000" >
			<swiper-item @click="jumpPage(index)" class="swiper-item" v-for="(item, index) in couponList" :key="index">
				<view class="warp">
					<view class="left">
						<view class="faceValue">
							<view>¥</view>
							<view class="price">{{item.reduce_price}}</view>
							<view>优惠券</view>
						</view>
						<view class="info">满{{item.min_price}}可用</view>
						<view class="info">有效期：{{item.expire_day}}天</view>
					</view>
					<view class="right">
						<u-button @click="jumpPage(index)" :custom-style="customStyle"  hover-class="none" shape="circle" size="mini">立即领取</u-button>
						<view class="info">已领取{{item.receive_num}}张</view>
					</view>
				</view>
			</swiper-item>
		</swiper> -->
		<login-model ref="loginModel"></login-model>
	</view>
</template>

<script>
	import loginModel from "@/components/public/loginModel.vue";
	import {isLogin,userCoupon} from "@/common/api.js";
	export default {
		components: {
			loginModel
		},
		data() {
			return {
				customStyle:{
					background:'#13797f',
					color:'#20cbd4'
				},
				couponList: [{
					reduce_price: '10.00',
					min_price:'300.00',
					expire_day:"30",
					receive_num:300
				}],
				
			}
		},
		mounted() {
			userCoupon(this,{page:0,limit:3,type:0});
		},
		methods: { 
			jumpPage(){
				uni.navigateTo({
				  url: '/goods/coupon'
				});
			},
			closeModel(){
				this.$refs.loginModel.closeModel();
			},
		}
	}
</script>

<style>
	.coupon{
		padding: 10rpx;
		margin: 10rpx 0;
		background-color: #fff;
		height: 175rpx;
	}
	.warp{
		height: 100%;
		background-size:contain;
		background-image: url(https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/coupon_bg1.png);
		background-repeat:no-repeat no-repeat;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	.left{
		width: 440rpx;
		margin-left: 80rpx;
	}
	.faceValue{
		display: flex;
		color: #0e595d;
		align-items: flex-end;
		font-size: 25rpx;
	}
	.price{
		font-size: 50rpx;
		line-height: 50rpx;
		font-weight: 700;
		margin-right: 10rpx;
	}
	.info{
		font-size: 20rpx;
		margin-top: 10rpx;
		color: #13797f;
	}
	.right{
		width: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
